<template>
  <div>
    <van-nav-bar
      title="申请退款"
      left-arrow
      @click-left="back">
      <template #left>
        <van-icon name="arrow-left" size="20"/>
      </template>
    </van-nav-bar>
    <div class="card">
      <span class="title">退款商品</span>
      <order-item :product="product"/>
    </div>

    <div class="card">
      <span class="title">退款信息</span>
      <van-field
        readonly
        clickable
        name="picker"
        :value="value"
        label="退款原因"
        placeholder="点击选择退款原因"
        @click="showPicker=true"
      />
      <van-cell title="退款金额"     >

      </van-cell>
    </div>
    <div class="card">
      <span class="title">补充描述</span>
      <van-field
        v-model="message"
        rows="2"
        autosize
        type="textarea"
        maxlength="100"
        placeholder="请输入描述内容以便客服更好的处理售后问题"
        show-word-limit
      />
    </div>
    <van-popup v-model="showPicker" position="bottom">
      <van-picker
        show-toolbar
        :columns="columns"
        @confirm="onConfirm"
        @cancel="showPicker = false"
      />
    </van-popup>

    <van-button type="primary" block round size="small"
                class="submit-button"
                color="linear-gradient(to right, #ff6034, #ee0a24)">
      提交
    </van-button>
  </div>

</template>

<script>
import OrderItem from '../../components/OrderItem'

export default {
  name: 'NoDelivery',
  components: {OrderItem},
  data () {
    return {
      value: '',
      showPicker: false,
      columns: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
      product: {
        id: 1,
        checked: false,
        goodsName: '测试标题',
        price: 111,
        number: 2,
        picUrl: 'https://img01.yzcdn.cn/vant/cat.jpeg',
        isEdit: false
      }

    }
  },
  methods: {

    onConfirm (value) {
      this.value = value
      this.showPicker = false
    },
    back () {
      this.$router.back()
    }
  }
}
</script>

<style scoped>
.van-cell{
  margin-top: 10px;
  padding: 0px;
}
.title {
  font-size: 16px;
  font-weight: bold;
}

</style>
